<head>
    <link href="./node_modules/plyr/dist/plyr.css" rel="stylesheet" />
    <link href="./style.css" rel="stylesheet" />
    <script src="./node_modules/plyr/dist/plyr.min.js"></script>
</head>

<body>
    <video
        id="player"
        autoplay
    />

    <script type="text/javascript">
     const player = new Plyr('#player', {
         controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', "fullscreen"],
     });

     function play(file) {
         var video = document.getElementById('player');
         video.setAttribute('src', file);
     }

     function toggle_play() {
         player.togglePlay();
     }

     function get_current_time() {
         return player.currentTime;
     }

     function set_current_time(time) {
         player.currentTime = parseFloat(time);
     }

     function forward() {
         player.forward(10);
     }

     function backward() {
         player.forward(-10);
     }

     function restart() {
         player.restart();
     }

     function increase_volume() {
         player.increaseVolume(0.1);
     }

     function decrease_volume() {
         player.decreaseVolume(0.1);
     }
    </script>
</body>
